<template>
	<view>
		<view class="title">
			<view class="title_top">
				<view class="title_top_left">
					<view class="name">
						{{m_msg.name}}
					</view>
					<u-tag :text="useMethodTitle()" type="primary" mode="dark" />
				</view>
				<image :src="m_msg.img_url"
					mode=""></image>
			</view>

			<view class="title_bottom">
				<u-subsection :list="list" :current="current" @change="sectionChange" active-color="#3ec1f8">
				</u-subsection>
				<view class="content">
					<view v-show="current === 0">
						<!-- usemethod, savemethod -->
						<view class="usemethod">
							<view class="m_title">使用方法</view>
							<!-- <rich-text :nodes="usemethodText"></rich-text> -->
							<view v-for="(item,index) in usemethodText" :key="index">{{item}}</view>
							<view class="m_title">储存方法</view>
							<rich-text :nodes="m_msg.savemethod"></rich-text>
						</view>
					</view>
					<view v-show="current === 1">
						<!-- heed, bad, err -->
						<view class="m_title">注意事项</view>
						<view v-for="(item,index) in heedText" :key="index">{{item}}</view>
						<view class="m_title">不良反应</view>
						<view v-for="(item,index) in badText" :key="index">{{item}}</view>
						<view class="m_title">禁忌</view>
						<view v-for="(item,index) in errText" :key="index">{{item}}</view>
					</view>
					<view v-show="current === 2">
						<!-- suit -->
						<view class="m_title">使用症状</view>
						<view v-for="(item,index) in suitText" :key="index">{{item}}</view>
					</view>
					<view v-show="current === 3">
						<!-- lement -->
						<view class="m_title">成分</view>
						<text>{{m_msg.lelment}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				index: '', // 药品的序号
				keyword: '', // 查询的药品名
				/**
				* 返回数据的属性
				*	bad: 不良反应
				*	err: 禁忌
				*	heed: 注意事项
				*	img_url: 图片
				*	lement: 成分
				*	name: 名字
				*	savemethod: 储存方法
				*	suit: 适应症状
				*	usemethod: 使用方法
				*/
				m_msg: '', // 药品信息
				tag_title: '', // 口服的那个tag
				usemethodText: '',
				heedText: '',
				badText: '',
				errText: '',
				suitText: '',
				list: [
					{name: '使用方法'},  // usemethod, savemethod
					{name: '注意事项'},  // heed, bad, err
					{name: '适用症状'},  // suit
					{name: '成分'}  // lement
				]

			};
		},
		async onLoad(options) {
			this.index = options.index
			this.keyword = options.keyword
			const {
				data: res
			} = await uni.$http.get('/medicines/search/?name=' + this.keyword)
			this.m_msg = res.data[this.index]
			this.tag_title = this.m_msg.usemethod.replace(/\"/g, "'").replace(/'/g, '"')
			// this.usemethodText = this.m_msg.usemethod.replace(/\[/g, "").replace(/\]/g, "").replace(/'/g, "")
			this.usemethodText = JSON.parse(this.m_msg.usemethod.replace(/\"/g, "'").replace(/'/g, '"'))
			this.heedText = JSON.parse(this.m_msg.heed.replace(/\"/g, "'").replace(/'/g, '"'))
			this.badText = JSON.parse(this.m_msg.bad.replace(/\"/g, "'").replace(/'/g, '"'))
			this.errText = JSON.parse(this.m_msg.err.replace(/\"/g, "'").replace(/'/g, '"'))
			this.suitText = JSON.parse(this.m_msg.suit.replace(/\"/g, "'").replace(/'/g, '"'))
			// console.log(this.m_msg);
		},
		methods: {
			useMethodTitle() {
				try {
					let changed = JSON.parse(this.tag_title)
					// console.log(changed[0][0][0] + changed[0][1][0]);
					// return '口服'
					return changed[0][0][0] + changed[0][1][0]
				} catch (e) {
					return '口服'
				}
			},
			sectionChange(index) {
				this.current = index
			}
		}
	}
</script>

<style lang="scss">
	.body {
		background-color: #f3f4f8;
	}

	.title {
		width: 90%;
		margin: 0 auto;
		padding: 1rem;
		border-radius: 10px;
		box-shadow: 5px 5px 23px #d9d9d9,
			-5px -5px 23px #ffffff;
		margin-top: 10px;
		margin-bottom: 10px;

		.title_top {
			display: flex;

			image {
				width: 8rem;
				height: 8rem;
			}

			.title_top_left {
				padding-right: 10px;
				padding-top: 15px;

				.name {
					white-space: normal;
				}
			}
		}
		.title_bottom {
			.content {
				
			}
		}
	}
	.m_title {
		padding-left: 10px;
		margin: 10px 0;
		border-left: 5px solid #25a7f8;
	}
</style>
